<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 标签内容分为两部分
        //      1. 标签的正文 : 标签内部填充的文本或者其它标签
        //      2. 标签的属性 : 正标签上绑定的功能属性(class,style,id,……)

        // 标签正文
        function getTagContent(){
            // 正文取值，通过对应DOM对象提供三个功能属性完成
            //      innerHTML : 直接获取原始的内容
            //      innerText : 直接获取原始的内容，但会将 <br> 标签转换为 \n，取出无效空白【代码格式上的缩进和换行】
            //      textContent : 只获取文本【删除标签】
            let pDom = document.querySelector("#pDom");
            console.log( pDom.innerHTML );
            console.log( pDom.innerText );
            console.log( pDom.textContent );
        }
        function setTagHtml(){
            let pDom = document.querySelector("#pDom");
            // innerHTML 完成正文设置
            //      1. 对原始内容进行覆盖
            //      2. 写入的字符串如果存在标签格式，会被解析显示
            // pDom.innerHTML = "新文本";
            // pDom.innerHTML = "<span style='color:red'>新文本</span>";
            pDom.innerHTML = `<span style='color:red'>新文本1</span>
                               <br>
                               <span style='color:blue'>新文本2</span>`;
        }
        function setTagText(){
            let pDom = document.querySelector("#pDom");
            // innerText 完成正文设置
            //      1. 对原始内容进行覆盖
            //      2. 写入的字符串如果存在标签格式，不会解析，直接显示原始值
            //          但 \n 会被转换为 <br> 并解析显示
            // pDom.innerText = "新文本";
            // pDom.innerText = "<span style='color:red'>新文本</span>";
            pDom.innerText = `<span style='color:red'>新文本1</span>
                               <br>
                               <span style='color:blue'>新文本2</span>`;

        }
        function setTagContent(){
            let pDom = document.querySelector("#pDom");
            // textContent 完成正文设置
            //      1. 对原始内容进行覆盖
            //      2. 写入的字符串如果存在标签格式，不会解析，直接显示原始值
            // pDom.textContent = "新文本";
            // pDom.textContent = "<span style='color:red'>新文本</span>";
            pDom.textContent = `<span style='color:red'>新文本1</span>
                               <br>
                               <span style='color:blue'>新文本2</span>`;
        }

        // 属性的操作
        function getAttr(){
            // 属性的获取
            //      getAttribute(attrname) 进行属性加载, 返回的是字符串
            let pDom2 = document.querySelector("#pDom2");
            console.log( pDom2.getAttribute("class") );
            console.log( pDom2.getAttribute("style") );
            console.log( pDom2.getAttribute("student") );
        }
        function setAttr(){
            let pDom2 = document.querySelector("#pDom2");
            // 属性的设置
            //      setAttribute(attrname,attrvalue) 进行属性新增|覆盖,提供字符串数据值
            pDom2.setAttribute("class","info bgcolor");
            pDom2.setAttribute("user","张三");
        }
    </script>
</head>
<body>
    <p id="pDom">
        <span>默    认</span>
        <br>
        <span>文本</span>
    </p>
    <input type="button" value="获取正文" onclick="getTagContent()">
    <input type="button" value="innerHTML设置正文" onclick="setTagHtml()">
    <input type="button" value="innerText设置正文" onclick="setTagText()">
    <input type="button" value="textContent设置正文" onclick="setTagContent()">

    <hr>
    <p id="pDom2" class="box title" style="color: red;" student="学生">属性操作</p>
    <input type="button" value="获取标签属性" onclick="getAttr()">
    <input type="button" value="标签属性设置" onclick="setAttr()">


</body>
</html>